<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" th:href="@{/css/StudentLeft.css}">
    <script th:src="@{/js/jquery-1.9.1.min.js}"></script>
</head>
<body>
<div class="nav">
    <div class="nav-list">
        <div class="nav-tit" id="personal">
            <a href="student.html" target="main">
                <img th:src="@{/images/personal-msg.png}" style="height: 30px" alt="">
                <span>个人信息</span>
            </a>
        </div>
        <div class="nav-tit">
            <a th:href="@{/limit(start=0,rows=6)}" target="main">
                <img th:src="@{/images/archives-msg.png}" alt="">
                <span>学生信息</span>
            </a>
        </div>
        <div class="nav-tit">
            <a th:href="@{/scoreLimit(start=0,rows=6)}" target="main">
                <img th:src="@{/images/job-msg.png}" alt="">
                <span>学生成绩</span>
            </a>
        </div>
        <div class="nav-tit">
            <a href="investigation.html" target="main">
                <img th:src="@{/images/job-change.png}" alt="">
                <span>考勤状况</span>
            </a>
        </div>
        <div class="nav-tit">
            <a href="StudentPubMed.html" target="main">
                <img th:src="@{/images/PubMed-msg.png}" alt="">
                <span>学校通知</span>
            </a>
        </div>
        <div class="nav-tit">
            <a th:href="@{/changePassword}" target="main">
                <img th:src="@{/images/modify-password.png}" alt="">
                <span>修改密码</span>
            </a>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        $('#personal').on('click', function () {
            $('#personal-child').fadeToggle(300);
        });
        let aLi = $('#personal-child li');
        aLi.on('click', function () {
            $(this).addClass('active').siblings('li').removeClass('active');
        })
    });
</script>
</body>
</html>
